@{
    ViewData["Title"] = "编辑库区设置";
    Layout = null;
    var model = ViewBag.Model as ThridGroup.ERP.Application.Contracts.DTO.WarehouseManagement.WarehouseAreaSettingDto;
    var isEdit = model != null;
    var warehouseId = isEdit ? model.WarehouseId : ViewBag.WarehouseId;
}

<!-- 直接引入所有必要的CSS和JS文件 -->
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<!-- 自定义样式 -->
<style>
    .form-container {
        padding: 32px 0;
        background: #f4f6fa;
        min-height: 100vh;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
    }
    .layui-form-label {
        width: 120px;
        padding: 10px 15px;
        font-size: 16px;
        color: #1e9fff;
        font-weight: 500;
        background: none;
    }
    .layui-input-block {
        margin-left: 150px;
    }
    .layui-form-item {
        margin-bottom: 22px;
    }
    .layui-input, .layui-textarea, .layui-select {
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        padding: 0 12px;
        border: 1px solid #e6eaf0;
        font-size: 15px;
        background: #f9fbfd;
        transition: border-color 0.2s;
    }
    .layui-input:focus, .layui-textarea:focus, .layui-select:focus {
        border-color: #1e9fff;
        background: #fff;
    }
    .layui-textarea {
        height: 90px;
        line-height: 22px;
        padding: 12px;
        resize: vertical;
        border-radius: 6px;
    }
    .form-actions {
        text-align: center;
        margin-top: 36px;
    }
    .form-actions .layui-btn {
        height: 42px;
        line-height: 42px;
        padding: 0 32px;
        font-size: 16px;
        margin: 0 12px;
        border-radius: 6px;
        font-weight: 500;
    }
    .form-actions .layui-btn-primary {
        border: 1px solid #e6eaf0;
        background: #fff;
        color: #1e9fff;
    }
    .form-actions .layui-btn-primary:hover {
        background: #e3f2fd;
        color: #1890ff;
    }
    .form-actions .layui-btn-normal {
        background-color: #1E9FFF;
        color: #fff;
    }
    .form-actions .layui-btn-normal:hover {
        background: #1890ff;
    }
    .required:after {
        content: '*';
        color: red;
        margin-left: 4px;
    }
    .layui-form-select dl {
        max-height: 200px;
    }
    /* 响应式优化 */
    @@media (max-width: 800px) {
        .form-container {
            padding: 8px 0;
            max-width: 100%;
        }
        .layui-form-label {
            width: 80px;
            font-size: 13px;
        }
        .layui-input, .layui-textarea, .layui-select {
            font-size: 13px;
        }
    }
</style>

<div class="form-container">
    <form class="layui-form" lay-filter="warehouseAreaForm" id="warehouseAreaForm">
        <input type="hidden" name="id" value="@(isEdit ? model.Id : 0)" />
        <input type="hidden" name="warehouseId" value="@warehouseId" />
        
        <div class="layui-form-item">
            <label class="layui-form-label required">库区编码</label>
            <div class="layui-input-block">
                <input type="text" name="areaCode" lay-verify="required" placeholder="请输入库区编码" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.AreaCode : "")" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label required">库区名称</label>
            <div class="layui-input-block">
                <input type="text" name="areaName" lay-verify="required" placeholder="请输入库区名称" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.AreaName : "")" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">所属仓库</label>
            <div class="layui-input-block">
                <select name="warehouseSelect" lay-filter="warehouseSelect" id="warehouseSelect" disabled>
                    <option value="">加载中...</option>
                </select>
                <input type="hidden" name="warehouseName" id="warehouseName" value="@(isEdit ? model.WarehouseName : "")" />
            </div>
        </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">库区类型</label>
                    <div class="layui-input-block">
                <input type="text" name="areaType" placeholder="请输入库区类型" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.AreaType : "")" />
            </div>
        </div>
        
                <div class="layui-form-item">
                    <label class="layui-form-label">存储类型</label>
                    <div class="layui-input-block">
                <input type="text" name="storageType" placeholder="请输入存储类型" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.StorageType : "")" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">位置描述</label>
            <div class="layui-input-block">
                <input type="text" name="location" placeholder="请输入位置描述" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.Location : "")" />
            </div>
        </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">面积(㎡)</label>
                    <div class="layui-input-block">
                <input type="number" name="area" placeholder="请输入面积" step="0.01"
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.Area : 0)" />
            </div>
        </div>
        
                <div class="layui-form-item">
                    <label class="layui-form-label">负责人</label>
                    <div class="layui-input-block">
                <input type="text" name="responsiblePerson" placeholder="请输入负责人" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.ResponsiblePerson : "")" />
            </div>
        </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">温度要求</label>
                    <div class="layui-input-block">
                <input type="text" name="temperatureRequirement" placeholder="请输入温度要求，例如：常温、0~5℃" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.TemperatureRequirement : "")" />
            </div>
        </div>
        
                <div class="layui-form-item">
                    <label class="layui-form-label">湿度要求</label>
                    <div class="layui-input-block">
                <input type="text" name="humidityRequirement" placeholder="请输入湿度要求，例如：40%~60%" 
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.HumidityRequirement : "")" />
            </div>
        </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">最大容量</label>
                    <div class="layui-input-block">
                <input type="number" name="maxCapacity" placeholder="请输入最大容量" step="0.01"
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.MaxCapacity : 0)" />
            </div>
        </div>
        
                <div class="layui-form-item">
                    <label class="layui-form-label">当前使用量</label>
                    <div class="layui-input-block">
                <input type="number" name="currentUsage" placeholder="请输入当前使用量" step="0.01"
                       autocomplete="off" class="layui-input" value="@(isEdit ? model.CurrentUsage : 0)" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" @(isEdit && model.Status ? "checked" : "") />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注" class="layui-textarea">@(isEdit ? model.Remark : "")</textarea>
            </div>
        </div>

        <div class="form-actions">
            <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
            <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        // 表单验证规则
        form.verify({
            required: function(value) {
                if(value.length === 0) {
                    return '必填项不能为空';
        }
            },
            number: function(value) {
                if(value && !/^\d+(\.\d+)?$/.test(value)) {
                    return '请输入正确的数字';
                }
            }
        });
        
        // 加载仓库下拉列表
        loadWarehouses();
        
        // 提交表单
        form.on('submit(saveBtn)', function(data) {
            var formData = data.field;
            
            // 处理复选框值
            formData.status = formData.status === 'on' ? true : false;
            
            // 组装数据
            var requestData = {
                areaCode: formData.areaCode,
                areaName: formData.areaName,
                warehouseId: parseInt(formData.warehouseId),
                warehouseName: formData.warehouseName,
                location: formData.location || '',
                area: parseFloat(formData.area) || 0,
                responsiblePerson: formData.responsiblePerson || '',
                areaType: formData.areaType || '',
                storageType: formData.storageType || '',
                temperatureRequirement: formData.temperatureRequirement || '',
                humidityRequirement: formData.humidityRequirement || '',
                maxCapacity: parseFloat(formData.maxCapacity) || 0,
                currentUsage: parseFloat(formData.currentUsage) || 0,
                status: formData.status,
                remark: formData.remark || ''
            };

            var id = parseInt(formData.id);
            var url = id > 0 
                ? '/WarehouseManagement/WarehouseAreaSetting/Update/' + id
                : '/WarehouseManagement/WarehouseAreaSetting/Create';
            var method = id > 0 ? 'PUT' : 'POST';

            // 发送请求
            $.ajax({
                url: url,
                type: method,
                contentType: 'application/json',
                data: JSON.stringify(requestData),
                success: function(res) {
                    if(res.code === 0) {
                        layer.msg(id > 0 ? '更新成功' : '添加成功', {icon: 1, time: 1000}, function() {
                            // 关闭弹窗并刷新父窗口
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(res.msg || '操作失败', {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('网络错误，请稍后重试', {icon: 2});
                }
            });

            return false; // 阻止表单默认提交
        });

        // 取消按钮
        $('#cancelBtn').click(function() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
        
        // 加载仓库列表
        function loadWarehouses() {
            $.ajax({
                url: '/WarehouseManagement/WarehouseSetting/GetWarehouseSettings',
                type: 'GET',
                success: function(res) {
                    if(res.code === 0 && res.data) {
                        var warehouseSelect = $('#warehouseSelect');
                        warehouseSelect.empty();
                        
                        // 添加选项
                        $.each(res.data, function(index, item) {
                            var option = $('<option></option>')
                                .val(item.id)
                                .text(item.depotName);
                                
                            if(item.id == @warehouseId) {
                                option.attr('selected', true);
                                $('#warehouseName').val(item.depotName);
                            }
                            
                            warehouseSelect.append(option);
                        });
                        
                        form.render('select');
                    }
                }
            });
        }
        
        // 监听仓库选择
        form.on('select(warehouseSelect)', function(data) {
            var warehouseId = data.value;
            var warehouseName = $(data.elem).find("option:selected").text();
            $('input[name="warehouseId"]').val(warehouseId);
            $('#warehouseName').val(warehouseName);
        });
    });
</script> 